<template>
  <div class="info-content">
    <el-form label-width="120px">
      <el-form-item label="页面标题">
        <el-input v-model="list.title"></el-input>
      </el-form-item>
      <el-form-item label="页面备注">
        <el-input type="textarea" :rows="4" v-model="list.remarks"></el-input>
      </el-form-item>
      <el-form-item label="页面标题颜色">
        <el-color-picker v-model="list.titleColor" show-alpha></el-color-picker>
      </el-form-item>
      <el-form-item label="页面标题背景颜色">
        <el-color-picker v-model="list.navBackgroundColor" show-alpha></el-color-picker>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="list.backgroundColor" show-alpha></el-color-picker>
      </el-form-item>
      <el-form-item label="背景图片">
        <el-image style="width: 100px; height: 100px" :src="list.backgroundImage"
          v-if="list.backgroundImage"></el-image>
        <el-button v-if="!list.backgroundImage" type="primary" icon="el-icon-plus" @click="addImage(0)"
          class="add-image" size="small">
          添加图片
        </el-button>
        <el-button v-else type="primary" icon="el-icon-delete" @click="() => list.backgroundImage = ''"
          class="add-image" size="small">
          清除图片
        </el-button>
      </el-form-item>
      <el-form-item label="首页弹窗图片">
        <el-image style="width: 100px; height: 100px" :src="list.popUpWindow" v-if="list.popUpWindow"></el-image>
        <el-button v-if="!list.popUpWindow" type="primary" icon="el-icon-plus" @click="addImage(1)" class="add-image"
          size="small">
          添加图片
        </el-button>
        <el-button v-else type="primary" icon="el-icon-delete" @click="() => list.popUpWindow = ''" class="add-image"
          size="small">
          清除图片
        </el-button>
      </el-form-item>
      <el-form-item label="背景图片高度">
      </el-form-item>
    </el-form>
    <el-slider v-model="list.height" show-input>
    </el-slider>
    <el-upload ref="upload" :http-request="upload" :show-file-list="false" multiple action style="display: none">
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "Info",
  props: ["data", "className"],
  data() {
    return {
      list: {},
      imageIndex: 0,
    };
  },
  mounted() {
    this.list = this.data;
    console.log(this.list, "this.list")
  },
  methods: {
    addImage(index) {
      this.imageIndex = index;
      this.$refs["upload"].$children[0].$refs.input.click();
    },
    upload(params) {
      let that = this;
      const file = params.file,
        fileType = file.type;
      const verifyList = [
        {
          text: "只能上传图片格式png、jpg、gif!",
          result: fileType.indexOf("image") != -1,
        },
        {
          text: "只能上传大小小于5M",
          result: file.size / 1024 / 1024 < 5,
        },
      ];

      for (let item of verifyList) {
        if (!item.result) {
          this.$message.error(item.text);
          return;
        }
      }
      let types = params.file.name.split(".");
      console.log(types[types.length - 1]);
      let key = new Date();
      key =
        that.$template + "/" + key.getTime() + "." + types[types.length - 1];
      const form = new FormData();
      form.append("file", file);
      form.append("clientType", "multipart/form-data");
      form.append("key", key);
      this.getToken().then(
        (res) => {
          form.append("token", res.data.token);
          that
            .$http({
              url: res.data.upload,
              method: "post",
              headers: {
                "Content-Type": "multipart/form-data",
                token: res.data.token,
              },
              data: form,
              dataType: "json",
              cache: false, //上传文件无需缓存
              processData: false, //用于对data参数进行序列化处理 这里必须false
              contentType: false, //必须
            })
            .then((ress) => {
              console.log(res, key, "res")
              if (this.imageIndex == 0) {
                that.list.backgroundImage = res.data.url + key;
              } else {
                that.list.popUpWindow = res.data.url + key;
              }

            });
        },
        function () {
          console.log("请求失败处理");
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.info-content {
  padding: 20px;
  overflow-y: scroll;
}
</style>
